import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView, Text, Button, Image } from '@tarojs/components'
import { AtIcon, AtInputNumber } from 'taro-ui'
import { Header } from '../common/header';
import { connect } from '@tarojs/redux'
import { State, Props } from './cart.interface'
import './cart.scss'
import '../common/header.scss'
import { globalData } from '../../utils/common';

let clickCart = true;

@connect(({ cart }) => ({
  ...cart,
}))

export class Cart extends Component<State, Props> {
  state = {
    selectAll: 0
  }
  constructor(props: Props) {
    super(props);
  }
  async componentDidMount() {
    const { dispatch } = this.props;
    await dispatch({
      type: 'cart/getList',
      payload: {}
    })
  }

  componentWillUnmount() { }

  componentDidHide() { }

  handleDel0(number) {
    const regexp = /(?:\.0*|(\.\d+?)0+)$/;
    let new_number = number.replace(regexp, '$1');
    return new_number;
  }

  async handleJiSuan() {
    const { dispatch, list } = this.props;
    let payload = [];
    for (let i = 0; i < list.length; i++) {
      for (let j = 0; j < list[i].goods.length; j++) {
        if(list[i].goods[j].selected){
          payload.push({
            cart_id: list[i].goods[j].id,
            quantity: list[i].goods[j].quantity
          });
        }
      }
    }

    await dispatch({
      type: 'cart/settlement',
      payload: {cart: JSON.stringify(payload)}
    })
  }

  async handleChange(goods, value) {
    goods.quantity = Number(value);
    goods.selected = 1;
    const { dispatch } = this.props;
    await dispatch({
      type: 'cart/addCart',
      payload: goods
    })
  }

  async handleSelect(goods) {
    goods.selected = goods.selected ? 0 : 1;
    const { dispatch } = this.props;
    await dispatch({
      type: 'cart/cartSelect',
      payload: goods
    })
  }

  async handleSelectAll() {
    const { selectAll } = this.state;
    const { dispatch, list } = this.props;
    for (let i = 0; i < list.length; i++) {
      list[i].selected = selectAll ? 0 : 1;
      for (let j = 0; j < list[i].goods.length; j++) {
        list[i].goods[j].selected = selectAll ? 0 : 1
      }
    }

    if (selectAll) {
      this.setState({
        selectAll: 0
      });
    } else {
      this.setState({
        selectAll: 1
      });
    }

    await dispatch({
      type: 'cart/cartSelectAll',
      payload: list
    })
  }

  async handleSelectStore(item) {
    if (item.selected) {
      item.selected = 0;
      for (let index = 0; index < item.goods.length; index++) {
        item.goods[index].selected = 0;
      }
    } else {
      item.selected = 1;
      for (let index = 0; index < item.goods.length; index++) {
        item.goods[index].selected = 1;
      }
    }
    const { dispatch } = this.props;
    await dispatch({
      type: 'cart/cartSelectStore',
      payload: item
    })
  }

  render() {
    const { mbuttom, buttom } = globalData;
    const { list } = this.props;
    const { selectAll } = this.state;
    let pay = 0;
    for (let i = 0; i < list.length; i++) {
      for (let j = 0; j < list[i].goods.length; j++) {
        if (list[i].goods[j].selected) {
          pay = (pay * 100 + list[i].goods[j].selling_price * 100 * list[i].goods[j].quantity) / 100;
        }
      }
    }
    return (
      <View style={{ marginBottom: mbuttom }}>
        <Header
          title='我的购物车'>
        </Header>
        {
          list.map(function (item) {
            return <View className='cart-store'>
              <View className='cart-title'>
                <View className='cart-title-content'>
                  {
                    item.selected === 1
                      ?
                      <AtIcon prefixClass='icon' value='xuanze' size='24' color='#F2CA26' onClick={this.handleSelectStore.bind(this, item)}></AtIcon>
                      :
                      <AtIcon prefixClass='icon' value='weixuanzhongyuanquan' size='24' color='#d8d8d8' onClick={this.handleSelectStore.bind(this, item)}></AtIcon>
                  }
                  <View className="cart-store-name">
                    <View className="cart-store-logo"><Image src={item.logo} mode='widthFix' /></View>
                    <Text>{item.store_name}</Text>
                    <AtIcon value='chevron-right' size='22' color='#d8d8d8'></AtIcon>
                  </View>
                  <View className='cart-store-other'></View>
                </View>
              </View>
              <ScrollView>
                {
                  item.goods.map(function (goods) {
                    return <View className='cart-select'>
                      {
                        goods.selected === 1
                          ?
                          <AtIcon prefixClass='icon' value='xuanze' size='24' color='#F2CA26' onClick={this.handleSelect.bind(this, goods)} />
                          :
                          <AtIcon prefixClass='icon' value='weixuanzhongyuanquan' size='24' color='#d8d8d8' onClick={this.handleSelect.bind(this, goods)} />
                      }
                      {/* <Checkbox color="#F2CA26" checked={item.checked} value='1' onClick={this.handleChange.bind(this, item.id)}></Checkbox> */}
                      <View className="cart-goods">
                        <View className='goods-item-image'>
                          <Image src={goods.thumbnail} mode='widthFix' />
                        </View>
                        <View className='goods-item-content'>
                          <View className='goods-item-content-title'>{goods.name}</View>
                          <View className='goods-item-content-buy-price-unio'>{goods.sku_value}</View>
                          {/* <Text className='goods-item-content-info'>{item.slogan}</Text> */}
                          {/* <View className='goods-item-content-tags'>
                          <View className='goods-item-content-tages-item'>
                            满168赠可乐
                          </View>
                          <View className='goods-item-content-tages-item'>
                            满268赠百事
                          </View>
                        </View> */}
                          <View className='goods-item-content-buy'>
                            <View className='goods-item-content-buy-price'>
                              <View className='goods-item-content-buy-price-value'>￥{goods.selling_price}</View>
                            </View>
                            <AtInputNumber min={1} max={100} step={1} value={goods.quantity} onChange={this.handleChange.bind(this, goods)} />
                          </View>
                        </View>
                      </View>
                    </View>
                  })
                }
              </ScrollView>
            </View>
          })
        }

        <View className='cart-pay' style={{ bottom: buttom }}>

          <View className='cart-pay-quanxuan' onClick={this.handleSelectAll.bind(this)}>
            {
              !selectAll
                ?
                <AtIcon prefixClass='icon' value='weixuanzhongyuanquan' size='24' color='#d8d8d8'></AtIcon>
                :
                <AtIcon prefixClass='icon' value='xuanze' size='24' color='#F2CA26'></AtIcon>

            }
            <Text className='cart-pay-quanxuan-text'>全选</Text>
          </View>
          <View className='cart-pay-jisuan'>
            <View className='cart-pay-total'><Text>合计:</Text> ￥{pay}</View>
            <View className='cart-pay-button'>
              <Button onClick={() => this.handleJiSuan()}>结算</Button>
            </View>
          </View>
        </View>
      </View>
    )
  }
}